import React from 'react';

interface ProgressProps {
  value: number;
  className?: string;
  max?: number;
}

const Progress: React.FC<ProgressProps> = ({ value, className = '', max = 100 }) => {
  // 确保值在有效范围内
  const validValue = Math.min(Math.max(value, 0), max);
  const percentage = (validValue / max) * 100;
  
  const baseClasses = 'relative h-4 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700';
  const classes = `${baseClasses} ${className}`;

  return (
    <div className={classes}>
      <div 
        className="h-full w-full bg-primary transition-all duration-300 ease-out"
        style={{ width: `${percentage}%` }}
      />
    </div>
  );
};

export { Progress };